<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <script href="/js/jquery.js"></script>
    <script href="/js/echarts.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="data" style="width: 60% ; height: 70%"></div>
<script type="text/javascript">
    var div = document.getElementById("data");
    var doc = echarts.init(div);
    var option;
    var obj;
    $.ajax({
        type: "get",
        async: true,
        url: "/Student/students",
        dataType: "json",
        success: function (data) {
            obj = eval(data);//解析json数据
            option = {
                title: {
                    text: '各学期男女人数总和',
                    left: 'center'
                },

                xAxis: {
                    name:"学期",
                    type: 'category',
                    data: obj.semesters,
                    axisLabel:{
                        interval: 0 ,
                    }
                },
                tooltip:{
                    trigger:"axis"
                },
                grid:{
                    bottom: 100,
                    left: 100,
                },
                yAxis: {
                    name: "数量",
                    type: 'value',
                    min: 0,
                    max: 700
                },
                series: [
                    {
                        name: 'male_counts',
                        data: obj.male_counts,
                        type: 'bar'
                    },
                    {
                        name: 'female_counts',
                        data: obj.female_counts,
                        type: 'bar'
                    }
                ]
            };
            doc.setOption(option);
        }
    });
</script>
</body>
</html>
